---
title: Checkbox
description: An easily stylable checkbox component.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-base-checkbox" />

## Installation

<ComponentInstallation name="components-base-checkbox" />

## Usage

```tsx
<Checkbox />
```

## API Reference

### Checkbox

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/checkbox#checkbox"
  text="Animate UI API Reference - Checkbox Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/checkbox#root"
  text="Base UI API Reference - Checkbox.Root"
/>
</div>

<TypeTable
  type={{
    variant: {
      description: 'The variant of the checkbox.',
      type: '"default" | "accent"',
      required: false,
    },
    size: {
      description: 'The size of the checkbox.',
      type: '"default" | "sm" | "lg"',
      required: false,
    },
    '...props': {
      description: 'The props of the checkbox.',
      type: 'HTMLMotionProps<"button">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `render` prop is not supported in the `Checkbox` component as it is used
  for animation.
</Callout>

## Credits

- [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/checkbox) for style inspiration.
